<template>
	<view>
		<view class="avatar">
			<view class="dflex alc mt60">
				<image src="../../static/avatar.jpg" class="ml40"></image>
				<view class="ml20">
					<view class="fs44 color fw900">郑州市区代理</view>
					<view class="mt12 fs28 gray">18888888888</view>
				</view>
			</view>
			<view style="margin-top: 100rpx;" class="pl40 pr40">
				<view
					class="dflex alc jcsb"
					v-for="(item, index) in list"
					:key="item.id"
					style="margin-bottom: 50rpx;"
					@click="handerClick(item.id)"
				>
					<view class="dflex item alc">
						<image :src="item.img" mode="" style="width: 30rpx;height: 30rpx;"></image>
						<view class="fs28 ml20">{{ item.name }}</view>
					</view>
					<view><u-icon name="arrow-right" color="#999"></u-icon></view>
				</view>
			</view>
		</view>
		<!-- 二维码弹窗 -->
		<u-popup :show="show" @close="show = false" mode="center" round="20rpx">
			<view class="popup">
				<view class="avatar-img dflex jcc pt60">
					<image src="../../static/avatar.jpg" mode=""></image>
				</view>
				<view class="textc fs32 color fw900 mt14">郑州市区域代理</view>
				<view class="code auto mt50 dflex jcc alc">
					<image
						src="../images/codema.png"
						mode="heightFix"
						style="width:360rpx;height:360rpx;overflow: hidden;border-radius: 20rpx;"
					></image>
				</view>
				<view class="textc fs28 gray mt30">- 扫一扫，即可加入 -</view>
				<view class="textc colora fw900 fs32" style="margin-top: 92rpx;">保存二维码</view>
			</view>
		</u-popup>
		<!-- 二维码弹窗结束 -->
		<tabbar :select="2"></tabbar>
	</view>
</template>

<script>
import tabbar from '@/components/tabbar/tabbar.vue';
export default {
	components: { tabbar },
	data() {
		return {
			indexType: uni.getStorageSync('indexType'),
			list: [
				{
					id: 1,
					img: require('../images/code.png'),
					name: '邀请码'
				},
				{
					id: 2,
					img: require('../images/pwd.png'),
					name: '修改密码'
				},
				{
					id: 3,
					img: require('../images/yhxy.png'),
					name: '用户协议'
				},
				{
					id: 4,
					img: require('../images/ysxy.png'),
					name: '隐私协议'
				},
				{
					id: 5,
					img: require('../images/tcdl.png'),
					name: '退出登录'
				}
			],
			show: false
		};
	},
	methods: {
		handerClick(id) {
			if (id === 1) {
				this.show = true;
			} else if (id === 2) {
				uni.navigateTo({
					url: '/pagesB/setpassword/setpassword'
				});
			} else if (id === 3) {
			} else if (id === 4) {
			} else if (id === 5) {
				uni.navigateTo({
					url: '/pagesB/login/login'
				});
			}
		}
	},
	onLoad() {
		uni.setStorageSync('indexType', 3);
	}
};
</script>

<style lang="scss" scoped>
.avatar {
	width: 750rpx;
	height: 560rpx;
	background-image: url('../images/my-img-bg.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	padding: 0.1rpx;
	image {
		width: 140rpx;
		height: 140rpx;
		border-radius: 50%;
	}
}
.item {
	image {
		width: 30rpx;
		height: 30rpx;
	}
}
.popup {
	width: 640rpx;
	height: 926rpx;
	background: linear-gradient(180deg, rgba(65, 81, 219, 0.3) 0%, rgba(65, 81, 219, 0) 100%);
	opacity: 1;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	opacity: 1;
	.avatar-img {
		image {
			width: 160rpx;
			height: 160rpx;
			border-radius: 50%;
		}
	}
	.code {
		width: 370rpx;
		height: 370rpx;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		border: 6rpx solid #4151db;
	}
}
</style>
